import { FC, useEffect, useLayoutEffect, useState } from 'react'
import { LoginContainer } from './Login.style'
import { Button, Checkbox, Form, Image, Input, message } from 'antd'
import { UserOutlined, SafetyCertificateOutlined, LockOutlined } from '@ant-design/icons'
import { useFormState } from '@shared/hooks/useFormState'
import { useModel } from '@shared/hooks/useModel'
import { deCryptoAES, enCryptoAES } from '@shared/helpers/crypto'

export const Login: FC = () => {
  const [user, bindUser, resolveUserStatus, bindUserItem, setUser] = useFormState('', value => {
    return [
      value.length > 0,
      "用户名是必填的"
    ]
  })

  const [pwd, bindPwd, resolvePwdStatus, bindPwdItem, setPwd] = useFormState('', value => {
    return [
      value.length > 0,
      "用户名是必填的"
    ]
  })

  const [code, bindCode, resolveCodeStatus, bindCodeItem, setCode] = useFormState('', value => {
    return [
      value.length > 0,
      "验证码是必填的"
    ]
  })

  const [memoPwd, bindMemoPwd, setMemoPwd] = useModel(false, {
    filed: "checked"
  })

  const onSubmit = () => {
    for (const fn of [resolveUserStatus, resolvePwdStatus, resolveCodeStatus]) {
      if (!fn()) return
    }

    if (memoPwd) {
      localStorage.setItem("pwd", JSON.stringify({
        username: enCryptoAES(user),
        pwd: enCryptoAES(pwd)
      }))
    }

    message.success("登录成功")
  }

  useLayoutEffect(() => {
    const pwd = localStorage.getItem("pwd")
    if (pwd) {
      const obj = JSON.parse(pwd)
      setUser(deCryptoAES(obj.username))
      setPwd(deCryptoAES(obj.pwd))
      setMemoPwd(true)
    }
  }, [])

  return (
    <LoginContainer>
      <Form className="loginForm" onFinish={onSubmit}>
        <h1 className="title">小鹿线基础框架</h1>

        <Form.Item {...bindUserItem}>
          <Input
            prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="用户名"
            {...bindUser}
          />
        </Form.Item>

        <Form.Item {...bindPwdItem}>
          <Input.Password
            prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="用户密码"
            {...bindPwd}
          />
        </Form.Item>

        <Form.Item {...bindCodeItem}>
          <div className="code">
            <Input
              prefix={
                <SafetyCertificateOutlined
                  style={{ color: 'rgba(0,0,0,.25)' }}
                />
              }
              placeholder="验证码"
              showCount
              maxLength={4}
              {...bindCode}
            />
            <Image
              style={{ cursor: 'pointer' }}
              preview={false}
              width={100}
              height={40}
              src="error"
              fallback=""
            />
          </div>
        </Form.Item>

        <Form.Item>
          <Checkbox {...bindMemoPwd}>记住密码</Checkbox>
        </Form.Item>

        <Form.Item>
          <Button type="primary" className="submit" htmlType='submit'>
            登录
          </Button>
        </Form.Item>
      </Form>
    </LoginContainer>
  )
}
